<template>
  <div>
    <header>
      <nav class="container">
        <img class="logo" src="../assets/img/logo1.png" alt="">
        <ul>
        	<li>用户账户<span>|</span></li>
          <li>平台配置<span>|</span></li>
          <li>客户管理<span>|</span></li>
          <li>云锁查看<span>|</span></li>
          <li>云锁配置<span>|</span></li>
          <li class="login">登录</li>
          <li class="register">注册</li>
        </ul>
        <div class="search">
           <img src="../assets/img/so.png" alt="">
          <input placeholder="搜索" type="text">
        </div>
      </nav>
    </header>



     <div class="content">
      <!-- <section v-if="scan_code" class="scan_code">
           <img src="../assets/img/logo.png" alt="">
          <h1>微信扫码登录</h1>
          <div class="code" @click="bind_phoneM"></div>
          <p>手机号登录></p>
       </section> -->
      <!-- <section v-if="bind_phone" class="bind_phone">
          <h2>绑定手机号</h2>
          <p>您已通过微信账号登录成功，请你绑定手机号，后续登录更便捷</p>
           <div class="user">
            <img src="../assets/img/u.png" alt="">
            <input placeholder="搜索" type="text">
           </div>
           <div class="verify">
             <img src="../assets/img/user.png" alt="">
             <input placeholder="搜索" type="text">
             <span>发送验证码</span>
           </div>
           <div class="btn">确认绑定</div>
       </section> -->
       <section  class="phone_login">
           <img src="../assets/img/logo.png" alt="">
          <h1>云锁管理系统</h1>
          <div class="user">
           <img src="../assets/img/u.png" alt="">
           <input v-model="phone" placeholder="请输入手机号" type="text">
          </div>
          <div class="verify">
            <img src="../assets/img/user.png" alt="">
            <input v-model="code" placeholder="验证码" type="text">
            <span @click="send_code" >发送验证码</span>
          </div>
          <div class="btn" @click='login'>
            <span v-if="!islogin">登录</span>
            <span v-if="islogin">正在登录中...</span>
          </div>
         <!-- <div class="weixin">
            <img src="../assets/img/weixin.png" alt="">
          </div> -->
       </section>
     </div>






<!-- huosenlei -->




  </div>
</template>

<script>
import {send_code,login,getpermiss_list,getmenu_list} from '../js/getApi.js'
import {Dyrouter} from '../router/index.js'
import {makeRouter} from '../js/unit.js'

export default {
  name: 'login',
  data () {
    return {
       phone:'',
       code:'',
       islogin:false
    }
  },
  methods:{
    send_code(){
       if(!this.phone){
         alert('请输入电话号码！')
         return;
       }
       send_code(1,this.phone)
    },
     login(){
       if(!this.phone){
         alert('请输入电话号码！')
         return;
       }
       if(!this.code){
         alert('请输入验证码！')
         return;
       }
      login(this.code,this.phone, async (res)=>{
        if(res.data.code!=1){
          alert(res.data.msg);
          return;
        }
         this.islogin=true;
        if(res.data.code==1){
          this.islogin=false;
          const data=res.data;
          this.$store.commit('getToken',data.token);
          console.log(data.role)
          this.$store.commit('setrole',data.role);
          Dyrouter((role)=>{
            if(role==1){
              this.$router.push({path:'/ad/b_index'});
            }
            if(role==2){
             this.$router.push({path:'/market/customer_m'})
            }
            if(role==3){
             this.$router.push({path:'/cloudlock_view/user_m'});
            }
          });
          

        }else{
          this.islogin=false;
          alert(data.msg);
        }
      })
     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

 header{
    border-bottom: 1px solid #BFBFBF;
 }
 nav{
   display: flex;
   height: 60px;
   align-items: center;
   justify-content: space-between;
 }
 nav .logo{
   display: flex;
 }
 nav .text{
   margin-left: 10px;
 }
 nav .logo{
    width:152px;
    height:40px;
 }


 nav ul{
   display:flex;
 }

 nav ul li{
   color: rgba(16, 16, 16, 100);
   font-size:14px;
   font-family: SourceHanSansSC-regular;
   cursor: pointer;
   width: 80px;
 }
 nav .login,nav .register{
   width: 40px;
 }
 nav ul li span{
   margin-left:5px;
   margin-right:5px;
 }

 .search{
   position: relative;
 }
 .search img{
   position: absolute;
   width: 20px;
   height: 20px;
   vertical-align:bottom;
   left: 2px;
   bottom:7px;
 }
 .search input{
   width: 190px;
   height: 30px;
   padding-left:30px;
   border: 1px solid rgba(187, 187, 187, 100);
 }
 .content{
    position: absolute;
    right:10%;
    bottom:10%;
    border: 1px solid rgba(187, 187, 187, 100);
    width: 351px;
    height: 411px;
    text-align: center;
 }
 @media screen and (max-width:480px){
  .content{
    right:-90%;
    bottom:-20%;
  }
 }
 .scan_code img,.phone_login img{
   width: 97px;
   height: 89px;
 }
 .scan_code h1,.phone_login h1{
   color: rgba(51, 51, 51, 100);
   font-weight:400;
 }
 .scan_code .code{
   width: 202px;
   height: 202px;
   background: #000;
   margin: 9px auto;
 }
 .scan_code p{
   color: rgba(16, 16, 16, 100);
   margin-top: 15px;
   cursor: pointer;
 }
 .bind_phone,.phone_login{
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .bind_phone img,.user img,.verify img{
   width: 24px;
   height: 24px;
 }
 .bind_phone h2{
   margin-top: 24px;
 }
 .bind_phone p{
   width: 252px;
   height: 40px;
   color: rgba(16, 16, 16, 100);
   font-size: 12px;
   text-align: center;
   font-family: SourceHanSansSC-regular;
   margin-top: 6px;
   line-height:21px;
 }
 .user{
   margin-top: 29px;
   position: relative;
 }
 .verify{
   margin-top: 23px;
   position: relative;
 }
 .user img,.verify img{
   position: absolute;
   left: 4px;
   bottom:10px;
 }

 .user input{
    width: 240px;
    height:40px;
    border: 1px solid rgba(187, 187, 187, 100);
    padding-left:30px;
 }
 .verify input{
   width: 159px;
   height: 40px;
   border: 1px solid rgba(187, 187, 187, 100);
   padding-left:30px;
 }
 .verify span{
   color: rgba(16, 16, 16, 100);
   font-size: 14px;
   font-family: SourceHanSansSC-regular;
   margin-left: 10px;
   cursor: pointer;
 }
  .btn{
   width: 299px;
   height: 50px;
   line-height:50px;
   color: #fff;
   background-color: rgba(5, 5, 5, 100);
   text-align: center;
   border: 1px solid rgba(255, 255, 255, 100);
   margin-top: 17px;
   cursor: default;
 }
 .weixin{
   width: 44px;
   height: 44px;
   line-height:55px;
   margin-top: 13px;
   border-radius: 50%;
   background-color: rgba(240, 240, 240, 100);
   text-align: center;
   border: 1px solid rgba(255, 255, 255, 100);
 }
 .weixin img{
   width: 24px;
   height: 24px;
 }



























</style>
